<template>
  <div class="main main_bg">
    <gl-title :is_mt="is_mt" :titleSize="titleSize"></gl-title>

    <div class="list" id="s" ref="chatMain">
      <ul>
        <div v-for="(item,k) in list" :key="k">
        <li class="tar">
          <div class="inlineb">{{item.title}}</div>
        </li>
        <li v-scroll>
          <div class="inlineb" v-html="item.detail"></div>
        </li>
        </div>

      </ul>
    </div>



    <div class="bot_list">
      <ul>
        <li v-for="(item,k) in datainfo" :key="k" @click="jump_go(item.id,item.title)"><div class="inlineb">{{item.title}}</div></li>
      </ul>
      <div class="more"><router-link :to="{path:'/member/help'}">{{$t('kefu.help_center')}}</router-link></div>

    </div>





  </div>
</template>
<script>

  export default {
    data(){
      return {
        titleSize:this.$t('title.kefu_view'),
        is_mt:true,
        datainfo:[],
        list:[],
        id:this.$route.query.id
      }
    },
    directives: {
      scroll: {
        inserted(el) {
          el.scrollIntoView()
        }
      }
    },
    mounted() {

      this.$post(this.URL.member.help_center, {
      }).then(res => {
        if (res.code == 0) {
          this.datainfo = res.data
        } else {
          this.$toast(res.message);
        }
      });

      this.jump_go(this.id,this.$route.query.title)

    },
    methods: {

      jump_go(id,title){

        this.id = id
        this.$post(this.URL.member.helpDetail,{
          answerId:this.id
        }).then((res) => {
          if (res.code == 0) {

            this.dataDetail = res.data;
            let initData = [{
              "title":title,
              "detail":res.data
            }];
            this.list.push(...initData);

          }
        });
      }
    },


  }

</script>


<style lang="less" scoped>
  #app {
    .main {
      .list {
        padding: .04rem .24rem;
        padding-bottom: 5.4rem;
        ul {
          li {
            margin: .2rem 0;
            .inlineb {
              background: #ffffff;
              border-radius: .02rem .33rem .33rem .33rem;
              box-shadow: 0 .06rem .1rem 0 rgba(0,0,0,0.05);
              padding: .1rem .46rem;
            }
          }
          li.tar {
            .inlineb {
              background: linear-gradient(90deg,#1f79bd, #2b388f);

              color: #fff;
              border-radius: .33rem .02rem .33rem .33rem;
            }
          }
        }
      }

      .bot_list {
        position: fixed;bottom:0;left:0;
        width: 100%;
        background: #fff;
        padding: .3rem .32rem;
        ul {
          overflow: auto;
          max-height: 4rem;
        }
        li {
          margin: .2rem 0;
          .inlineb {
            background: #eeeff0;
            border-radius: .33rem;
            box-shadow: 0 .06rem .1rem 0 rgba(0,0,0,0.05);
            padding: .1rem .46rem;
            vertical-align: top;
          }
        }
      }
      .more {
        padding: .1rem 0 .1rem .4rem;
        a {
          color:#2B388F;
          font-size: .3rem;
        }
      }
    }
  }
</style>
